﻿<%@ Page Language="C#" MasterPageFile="~/Samples/Sample.Master" AutoEventWireup="true"
    CodeBehind="Droppable.aspx.cs" Inherits="JQueryControlToolkit.Sample.Web.Samples.Droppable"
    Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        #droppable
        {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }
        #draggable, #draggable-nonvalid
        {
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
    <div class="demo">
        <div id="draggable-nonvalid" class="ui-widget-content">
            <p>
                I'm draggable but can't be dropped</p>
        </div>
        <div id="draggable" class="ui-widget-content">
            <p>
                Drag me to my target</p>
        </div>
        <div id="droppable" class="ui-widget-header">
            <p>
                accept: '#draggable'</p>
        </div>
    </div>
    <jQuery:DraggableExtender ID="DraggableExtender1" TargetControlSelector="#draggable, #draggable-nonvalid"
        runat="server" />
    <jQuery:DroppableExtender ID="DroppableExtender1" TargetControlSelector="#droppable" HoverCssClass="ui-state-highlight"
        AcceptSelector="#draggable" runat="server">
    </jQuery:DroppableExtender>
</asp:Content>
